<script setup lang="ts">

import MapComponent from "../components/MapComponent.vue";
import HeaderTitle from "../components/HeaderTitle.vue";
import Navigator from "../components/NavigatorRoot.vue";
import {computed, onMounted, reactive, ref} from 'vue'
import {addUserRole, getUserRole, removeUser, userLogin} from "../network/userApi.ts";
import axios from "axios";
import {currentRoleIndex, navigatorDict} from "../utils/UserUtils.ts";

let pageSize = ref(5)
let currentPage = ref(1)

function handleCurrentChange(index: number){
  console.log(`current page: ${index}`)
}

let tableData = ref()
let userPage = reactive({
  "limit": pageSize.value,
  "offset": currentPage.value
})

onMounted(()=>{
  getUserTable()
})
function getUserTable(){
  getUserRole(userPage).then(res=>{
    console.log("getUserRole--data:")
    console.log(res.data.data)
    tableData.value = res.data.data
    tableData.value.forEach(el=>{
      let roles_temp = [false,false,false,false,false]
      for(let i=0; i<el.roles.length; i++){
        if(el.roles[i]=="超级管理员"){
          roles_temp[0] = true
        }
        if(el.roles[i]=="任务发布人"){
          roles_temp[1] = true
        }
        if(el.roles[i]=="审核人"){
          roles_temp[2] = true
        }
        if(el.roles[i]=="实施人"){
          roles_temp[3] = true
        }
        if(el.roles[i]=="游客"){
          roles_temp[4] = true
        }
      }
      el.roleslist = roles_temp
    })
    console.log("getUserRole--data-roleList:")

    console.log(tableData.value)
  })

}
const handleDetail = (index: number, row) => {
  alert(JSON.stringify(row))
  console.log(index, row)
}
const handleDelete = (index: number, row) => {
  let user_temp = {"user_id":tableData.value[index].id}
  removeUser(user_temp).then(res=>{
    alert(res.data.message)
    getUserTable()
  })
}
function handleCheckboxChange(tableIndex: number, sign: boolean,roleIndex: number){
  tableData.value[tableIndex].roleslist[roleIndex]=sign;
  console.log(tableData.value[tableIndex].roleslist)
  if(roleIndex==0){
    tableData.value[tableIndex].roles.push("超级管理员")
  }
  if(roleIndex==1){
    tableData.value[tableIndex].roles.push("任务发布人")
  }
  if(roleIndex==2){
    tableData.value[tableIndex].roles.push("审核人")
  }
  if(roleIndex==3){
    tableData.value[tableIndex].roles.push("实施人")
  }
  if(roleIndex==4){
    tableData.value[tableIndex].roles.push("游客")
  }
  let userRoles = {
    "roleNameList": tableData.value[tableIndex].roles,
    "userId": tableData.value[tableIndex].id
  }
  addUserRole(userRoles).then(res=>{
    alert("权限"+res.data.message)
  })
}
console.log("localStorage.getItem(\"currentRoleIndex\"):",localStorage.getItem("currentRoleIndex"))
currentRoleIndex.value = localStorage.getItem("currentRoleIndex") ? localStorage.getItem("currentRoleIndex") : 5
</script>

<template>
  <div class="flex flex-col h-full w-full fixed top-0 right-0  bg-gray-2 gap-2">
    <header-title></header-title>
    <div class="flex grow gap-2 w-full">
      <component :is="navigatorDict[currentRoleIndex]" class="w-38"></component>

      <div class="ml-40 grow">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" width="50" align="center"/>
          <el-table-column label="id" prop="id" width="120" align="center"/>
          <el-table-column label="账号" prop="username" width="200" align="center"/>
          <el-table-column label="用户名" prop="nickname" width="200" align="center"/>
          <el-table-column label="设置权限" prop="roles"  align="center">
            <el-table-column prop="roleslist[0]" label="管理员" width="120" align="center">
              <template #default="scope">
                <input type="checkbox" v-model="scope.row.roleslist[0]"
                       :disabled="!!scope.row.roleslist[0]"
                       :class="scope.row.roleslist[0] ?'dx-checkbox-disabled':''"
                       @change="handleCheckboxChange(scope.$index,scope.row.roleslist[0],0)"
                >
              </template>
            </el-table-column>
            <el-table-column prop="roleslist[1]" label="发布" width="120" align="center">
              <template #default="scope">
                <input type="checkbox" v-model="scope.row.roleslist[1]"
                       :disabled="!!scope.row.roleslist[1]"
                       :class="scope.row.roleslist[1] ?'dx-checkbox-disabled':''"
                       @change="handleCheckboxChange(scope.$index,scope.row.roleslist[1],1)">
              </template>
            </el-table-column>
            <el-table-column prop="roleslist[2]" label="审核" width="120" align="center">
              <template #default="scope">
                <input type="checkbox" v-model="scope.row.roleslist[2]"
                       :disabled="!!scope.row.roleslist[2]"
                       :class="scope.row.roleslist[2] ?'dx-checkbox-disabled':''"
                       @change="handleCheckboxChange(scope.$index,scope.row.roleslist[2],2)"
                >
              </template>
            </el-table-column>
            <el-table-column prop="roleslist[3]" label="实施" width="120" align="center">
              <template #default="scope">
                <input type="checkbox" v-model="scope.row.roleslist[3]"
                       :disabled="!!scope.row.roleslist[3]"
                       :class="scope.row.roleslist[3] ?'dx-checkbox-disabled':''"
                       @change="handleCheckboxChange(scope.$index,scope.row.roleslist[3],3)"
                >

              </template>
            </el-table-column>
            <el-table-column prop="roleslist[4]" label="游客" width="120" align="center">
              <template #default="scope">
                <input type="checkbox" v-model="scope.row.roleslist[4]"
                       :disabled="!!scope.row.roleslist[4]"
                       :class="scope.row.roleslist[4] ?'dx-checkbox-disabled':''"
                       @change="handleCheckboxChange(scope.$index,scope.row.roleslist[4],4)"
                >
              </template>
            </el-table-column>

          </el-table-column>
          <el-table-column align="center" label="操作" >
            <template #default="scope">
              <el-button
                  size="small"
                  type="primary"
                  color="#C7E8E1FF"
                  :dark="true"
                  @click="handleDetail(scope.$index, scope.row)"
              >
                详情
              </el-button>
              <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="bg-white">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :small=false
              :disabled=false
              :background=false
              layout="prev, pager, next, jumper"
              :total="40"
              @current-change="handleCurrentChange"
          />

        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>
input[type=checkbox]{
  width: 16px;
  height: 16px;
  margin-top: 2px;
  position: relative;
}
input[type=checkbox]::after {
  position: absolute;
  top: 0;
  color: #000;
  width: 16px;
  height: 16px;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: ' ';
  border-radius: 3px;
}
input[type=checkbox]:checked::after {
  content: "✓";
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  background-color: #42BEAD;
}
.dx-checkbox-disabled {
  cursor: not-allowed;

  .dx-checkbox-text {
    padding: 0 8px;
    font-size: 14px;
    vertical-align: text-top;
    color: $grey-color;
  }
}
</style>